<template>
  <g class="tank"
    :transform="`translate(${props.x}, ${props.y}) rotate(${degs[props.direction]}, ${TANK.size / 2}, ${TANK.size / 2})`"
  >
    <g v-if="props.shape === 1">
      <polygon
        points="1,4 4,4 4,7 5.5,7 5.5,6 7.5,6 7.5,1 8.5,1 8.5,13 5.5,13 5.5,12 4,12 4,15 1,15"
        :fill="`${TANK.colors[props.color].a}`"
      />
      <rect x="7.5" y="1" width="1" height="6" :fill="`${TANK.colors[props.color].a}`" />
      <rect x="12" y="4" width="1" height="1" :fill="`${TANK.colors[props.color].a}`" />
      <polygon
        points="2,4 4,4 4,5 3,5 3,14 4,14 4,15 2,15"
        :fill="`${TANK.colors[props.color].b}`"
      />
      <rect x="5.5" y="8" width="1" height="3" :fill="`${TANK.colors[props.color].b}`" />
      <polygon
        points="6.5,6 7.5,6 7.5,7 10.5,7 10.5,8 11.5,8 11.5,12 10.5,12 10.5,13 7.5,13 7.5,12 6.5,12 6.5,11 7.5,11 7.5,9 8.5,9 8.5,8 6.5,8"
        :fill="`${TANK.colors[props.color].b}`"
      />
      <rect x="13" y="4" width="2" height="11" :fill="`${TANK.colors[props.color].b}`" />
      <path
        d="M1,5 h2 v1 h-2 v-1 M1,7 h2 v1 h-2 v-1 M1,9 h2 v1 h-2 v-1 M1,11 h2 v1 h-2 v-1 M1,13 h2 v1 h-2 v-1 M4,12 h1.5 v0.5 h-1.5 v-0.5 M8.5,6 h2 v1 h-2 v-1 M8.5,9 h2 v3 h-3 v-1 h1 v-2 M5.5,13 h5 v1 h-5 v-1 M10.5,7.5 h1 v-0.5 h0.5 v-2 h3 v1 h-2 v1 h2 v1 h-2 v1 h2 v1 h-2 v1 h2 v1 h-2 v1 h2 v1 h-2 v1 h-1 v-2 h-0.5 v-0.5 h-1 v-0.5 h1 v-4 h-1 M5.5,13 h5 v1 h-5 v-1"
        :fill="`${TANK.colors[props.color].c}`"
      />
    </g>

    <g v-if="props.shape === 2">
      <path
        d="M1.5,4 h1 v1 h-1 v-1 M1.5,6 h1 v1 h-1 v-1 M1.5,8 h1 v1 h-1 v-1 M1.5,10 h1 v1 h-1 v-1 M1.5,12 h1 v1 h-1 v-1 M1.5,14 h1 v1 h-1 v-1 M3.5,5 h3 v3 h-1 v5 h1 v1 h-2 v-8 h-1 v-1 M3.5,14 h1 v1 h-1 v-1 M6.5,8 h2 v1 h-1 v3 h-1 v-4 M11.5,4 h1 v1 h-1 v-1 M7.5,0.5 h1 v6.5 h-1 v-6.5"
        :fill="`${TANK.colors[props.color].a}`"
      />
      <path
        d="M2.5,4 h2 v1 h-2 v-1 M2.5,6 h2 v8 h-1 v1 h-1 v-1 h1 v-1 h-1 v-1 h1 v-1 h-1 v-1 h1 v-1 h-1 v-1 h1 v-1 h-1 v-1 M5.5,8 h1 v4 h1 v1 h2 v1 h-3 v-1 h-1 v-5 M7.5,9 h1 v3 h-1 v-3 M6.5,6 h1 v1 h1 v-1 h1 v2 h1 v5 h-1 v-4 h-1 v-1 h-2 v-2 M12.5,4 h2 v1 h-2 v-1 M12.5,6 h2 v1 h-2 v-1 M12.5,8 h2 v1 h-2 v-1 M12.5,10 h2 v1 h-2 v-1 M12.5,12 h2 v1 h-2 v-1 M12.5,14 h2 v1 h-2 v-1"
        :fill="`${TANK.colors[props.color].b}`"
      />
      <path
        d="M1.5,5 h2 v1 h-2 v-1 M1.5,7 h2 v1 h-2 v-1 M1.5,9 h2 v1 h-2 v-1 M1.5,11 h2 v1 h-2 v-1 M1.5,13 h2 v1 h-2 v-1 M7,4 h0.5 v2 h-1 v-1 h0.5 v-1 M8.5,9 h1 v4 h-2 v-1 h1 v-3 M8.5,4 h0.5 v1 h5.5 v1 h-2 v1 h2 v1 h-2 v1 h2 v1 h-2 v1 h2 v1 h-2 v1 h2 v1 h-2 v1 h2 v0.5 h-2.5 v-0.5 h-0.5 v-0.5 h-6.5 v1 h-3.5 v-0.5 h3 v-1 h5 v-1 h1 v-5 h-1 v-2 h-1 v-2"
        :fill="`${TANK.colors[props.color].c}`"
      />
    </g>

    <g v-if="props.shape === 3">
      <path
        d="M1.5,4.5 h1 v1 h-1 v-1 M1.5,6.5 h1 v1 h-1 v-1 M1.5,8.5 h1 v1 h-1 v-1 M1.5,10.5 h1 v1 h-1 v-1 M1.5,12.5 h1 v1 h-1 v-1 M1.5,14.5 h1 v1 h-1 v-1 M3.5,5.5 h2 v1 h-1 v5 h1 v1 h1 v1 h-2 v-1 h-1 v-7 M5.5,3.5 h1 v2 h-1 v-2 M6.5,6.5 h2 v1 h-1 v4 h-1 v-5 M6.5,0.5 h2 v1 h-1 v1 h-1 v-2 M7.5,2.5 h1 v3 h-1 v-3 M11.5,3.5 h1 v1 h-1 v-1"
        :fill="`${TANK.colors[props.color].a}`"
      />
      <path
        d="M1.5,3.5 h1 v1 h-1 v-1 M2.5,4.5 h2 v1 h-1 v7 h1 v3 h-2 v-11 M4.5,6.5 h2 v5 h-2 v-5 M5.5,5.5 h5 v1 h1 v5 h-1 v1 h-1 v1 h-3 v-1 h-1 v-1 h2 v1 h2 v-5 h-1 v-1 h-3 v-1 M7.5,7.5 h1 v4 h-1 v-4 M13.5,4.5 h1 v1 h-1 v-1 M13.5,6.5 h1 v1 h-1 v-1 M13.5,8.5 h1 v1 h-1 v-1 M13.5,10.5 h1 v1 h-1 v-1 M13.5,12.5 h1 v1 h-1 v-1 M13.5,14.5 h1 v1 h-1 v-1 M8.5,0.5 h1 v2 h-2 v-1 h1 v-1"
        :fill="`${TANK.colors[props.color].b}`"
      />
      <path
        d="M2.5,3.5 h2 v1 h-2 v-1 M6.5,3.5 h1 v2 h-1 v-2 M8.5,7.5 h1 v5 h-2 v-1 h1 v-4 M8.5,3.5 h2 v2 h-2 v-2 M10.5,4.5 h3 v2 h-3 v-2 M11.5,6.5 h2 v9 h-2 v-9 M10.5,11.5 h1 v3 h-7 v-1 h5 v-1 h1 v-1 h1 v-7 h-1 v-2 M12.5,3.5 h2 v1 h-2 v-1 M13.5,5.5 h1 v1 h-1 v-1 M13.5,7.5 h1 v1 h-1 v-1 M13.5,9.5 h1 v1 h-1 v-1 M13.5,11.5 h1 v1 h-1 v-1 M13.5,13.5 h1 v1 h-1 v-1"
        :fill="`${TANK.colors[props.color].c}`"
      />
    </g>

    <g v-if="props.shape === 4">
      <path
        d="M1,2 h1 v1 h-1 v-1 M1,4 h1 v1 h-1 v-1 M1,6 h1 v1 h-1 v-1 M1,8 h1 v1 h-1 v-1 M1,10 h1 v1 h-1 v-1 M1,12 h1 v1 h-1 v-1 M1,14 h1 v1 h-1 v-1 M3,3 h3 v3 h1 v-6 h1 v7 h-3 v6 h-1 v-9 h-1 v-1 M6,8 h3 v1 h-2 v2 h-1 v-3 M12,2 h1 v1 h-1 v-1"
        :fill="`${TANK.colors[props.color].a}`"
      />
      <path
        d="M2,2 h2 v1 h-1 v1 h1 v10 h-1 v1 h-1 v-13 M6,3 h1 v3 h-1 v-3 M8,0 h1 v6 h1 v-3 h3 v1 h-1 v2 h-1 v1 h-3 v-7 M5,7 h1 v6 h-1 v-6 M6,7 h5 v6 h-5 v-2 h1 v1 h3 v-3 h-1 v-1 h-3 v-1 M7,9 h2 v2 h-2 v-2 M11,13 h1 v1 h-1 v-1 M12,14 h1 v1 h-1 v-1 M13,2 h2 v1 h-2 v-1 M13,4 h1 v10 h-1 v-10  M14,4 h1 v1 h-1 v-1 M14,6 h1 v1 h-1 v-1 M14,8 h1 v1 h-1 v-1 M14,10 h1 v1 h-1 v-1 M14,12 h1 v1 h-1 v-1 M14,14 h1 v1 h-1 v-1"
        :fill="`${TANK.colors[props.color].b}`"
      />
      <path
        d="M9,3 h1 v3 h-1 v-3 M9,9 h1 v3 h-3 v-1 h2 v-2 M12,4 h1 v10 h-1 v-1 h-1 v-7 h1 v-2 M4,13 h7 v1 h1 v1 h-8 v1 h-3 v-1 h2 v-1 h1 v-1 M13,3 h2 v1 h-2 v-1 M14,5 h1 v1 h-1 v-1 M14,7 h1 v1 h-1 v-1 M14,9 h1 v1 h-1 v-1 M14,11 h1 v1 h-1 v-1 M14,13 h1 v1 h-1 v-1 M13,14 h1 v1 h1 v1 h-3 v-1 h1 v-1"
        :fill="`${TANK.colors[props.color].c}`"
      />
    </g>

    <g v-if="props.shape === 5">
      <path
        d="M0.5,4 h1 v1 h-1 v-1 M0.5,6 h1 v1 h-1 v-1 M0.5,8 h1 v1 h-1 v-1 M0.5,10 h1 v1 h-1 v-1 M0.5,12 h1 v1 h-1 v-1 M0.5,14 h1 v1 h-1 v-1 M5.5,5 h1 v3 h-2 v4 h2 v2 h-1 v-1 h-2 v-7 h2 v-1 M8.5,8 h1 v3 h-3 v-1 h2 v-2 M12.5,4 h1 v1 h-1 v-1 M7.5,0 h1 v6 h-1 v-6"
        :fill="`${TANK.colors[props.color].a}`"
      />
      <path
        d="M1.5,4 h2 v11 h-2 v-1 h1 v-1 h-1 v-1 h1 v-1 h-1 v-1 h1 v-1 h-1 v-1 h1 v-1 h-1 v-1 h1 v-1 h-1 v-1 M6.5,4 h1 v5 h-2 v2 h4 v2 h-1 v1 h-2 v-2 h-2 v-4 h2 v-4 M7.5,6 h2 v1 h1 v5 h-1 v-4 h-1 v-1 h-1 v-1 M7.5,15 h1 v1 h-1 v-1 M13.5,4 h2 v1 h-2 v-1 M13.5,6 h2 v1 h-2 v-1 M13.5,8 h2 v1 h-2 v-1 M13.5,10 h2 v1 h-2 v-1 M13.5,12 h2 v1 h-2 v-1 M13.5,14 h2 v1 h-2 v-1 M12.5,5 h1 v10 h-1 v-10"
        :fill="`${TANK.colors[props.color].b}`"
      />
      <path
        d="M0.5,5 h2 v1 h-2 v-1 M0.5,7 h2 v1 h-2 v-1 M0.5,9 h2 v1 h-2 v-1 M0.5,11 h2 v1 h-2 v-1 M0.5,13 h2 v1 h-2 v-1 M7.5,7 h1 v3 h-2 v1 h-1 v-2 h2 v-2 M8.5,4 h1 v1 h2 v1 h1 v7 h-2 v1 h-1 v1 h-3 v-1 h2 v-1 h1 v-1 h1 v-5 h-1 v-1 h-1 v-2 M13.5,5 h2 v1 h-2 v-1 M13.5,7 h2 v1 h-2 v-1 M13.5,9 h2 v1 h-2 v-1 M13.5,11 h2 v1 h-2 v-1 M13.5,13 h2 v1 h-2 v-1"
        :fill="`${TANK.colors[props.color].c}`"
      />
    </g>

    <g v-if="props.shape === 6">
      <path
        d="M4.5,3 h2 v4 h-1 v-1 h-1 v-1 h-1 v-1 h1 v-1 M4.5,7 h1 v5 h1 v1 h-2 v-6 M8.5,9 h1 v2 h-2 v-1 h1 v-1 M9.5,12 h1 v1 h-1 v-1 M6.5,13 h3 v1 h-3 v-1 M7.5,15 h1 v1 h-1 v-1 M7.5,0 h1 v7 h-1 v-7"
        :fill="`${TANK.colors[props.color].a}`"
      />
      <path
        d="M1.5,3 h1 v1 h-1 v-1 M1.5,8 h1 v1 h-1 v-1 M1.5,13 h1 v1 h-1 v-1 M3.5,5 h1 v1 h1 v1 h-1 v6 h2 v1 h-2 v1 h-1 v-10 M6.5,6 h1 v1 h-1 v-1 M5.5,7 h1 v5 h-1 v-5 M6.5,6 h1 v1 h1 v-1 h1 v3 h-1 v-1 h-1 v1 h-1 v-3 M9.5,7 h1 v5 h-1 v-5 M6.5,11 h3 v2 h-3 v-2 M9.5,3 h2 v2 h-2 v-2 M11.5,4 h1 v11 h-1 v-11 M12.5,3 h1 v1 h-1 v-1 M12.5,8 h1 v1 h-1 v-1 M12.5,13 h1 v1 h-1 v-1"
        :fill="`${TANK.colors[props.color].b}`"
      />
      <path
        d="M2.5,3 h1 v3 h-2 v-2 h1 v-1 M2.5,8 h1 v3 h-2 v-2 h1 v-1 M2.5,13 h1 v3 h-2 v-2 h1 v-1 M6.5,3 h1 v3 h-1 v-3 M8.5,3 h1 v3 h-1 v-3 M9.5,5 h2 v2 h-2 v-2 M10.5,7 h1 v7 h-1 v-7 M9.5,13 h1 v1 h-1 v-1 M7.5,8 h1 v2 h-1 v1 h-1 v-2 h1 v-1 M4.5,14 h7 v2 h-3 v-1 h-1 v1 h-3 v-2 M13.5,3 h1 v3 h-2 v-2 h1 v-1 M13.5,8 h1 v3 h-2 v-2 h1 v-1 M13.5,13 h1 v3 h-2 v-2 h1 v-1"
        :fill="`${TANK.colors[props.color].c}`"
      />
    </g>

    <g v-if="props.shape === 7">
      <path
        d="M0.5,3.5 h1 v1 h-1 v-1 M0.5,5.5 h1 v1 h-1 v-1 M0.5,7.5 h1 v1 h-1 v-1 M0.5,9.5 h1 v1 h-1 v-1 M0.5,11.5 h1 v1 h-1 v-1 M0.5,13.5 h1 v1 h-1 v-1 M5.5,4.5 h1 v3 h-2 v4 h2 v1 h1 v2 h-2 v-2 h-2 v-7 h2 v-1 M7.5,14.5 h1 v1 h-1 v-1 M8.5,8.5 h1 v2 h-2 v-1 h1 v-1 M6.5,0.5 h2 v6 h-1 v-5 h-1 v-1 M12.5,3.5 h1 v1 h-1 v-1"
        :fill="`${TANK.colors[props.color].a}`"
      />
      <path
        d="M1.5,3.5 h2 v12 h-1 v-1 h-1 v-11 M4.5,7.5 h2 v4 h-2 v-4 M6.5,3.5 h1 v3 h2 v2 h-1 v-1 h-1 v1 h-1 v-5 M9.5,7.5 h2 v4 h-2 v-4 M6.5,10.5 h3 v2 h-1 v1 h-1 v-1 h-1 v-2 M6.5,14.5 h1 v1 h-1 v-1 M8.5,0.5 h1 v1 h-1 v-1 M12.5,4.5 h1 v11 h-1 v-11 M13.5,3.5 h2 v1 h-2 v-1 M13.5,5.5 h2 v1 h-2 v-1 M13.5,7.5 h2 v1 h-2 v-1 M13.5,9.5 h2 v1 h-2 v-1 M13.5,11.5 h2 v1 h-2 v-1 M13.5,13.5 h2 v1 h-2 v-1"
        :fill="`${TANK.colors[props.color].b}`"
      />
      <path
        d="M0.5,4.5 h2 v1 h-2 v-1 M0.5,6.5 h2 v1 h-2 v-1 M0.5,8.5 h2 v1 h-2 v-1 M0.5,10.5 h2 v1 h-2 v-1 M0.5,12.5 h2 v1 h-2 v-1 M0.5,14.5 h2 v1 h-2 v-1 M7.5,7.5 h1 v2 h-1 v1 h-1 v-2 h1 v-1 M8.5,3.5 h1 v1 h1 v1 h1 v7 h-2 v2 h-1 v1 h-1 v-1 h-1 v-1 h1 v-1 h1 v-1 h2 v-4 h-2 v-1 h-1 v-3 M13.5,4.5 h2 v1 h-2 v-1 M13.5,6.5 h2 v1 h-2 v-1 M13.5,8.5 h2 v1 h-2 v-1 M13.5,10.5 h2 v1 h-2 v-1 M13.5,12.5 h2 v1 h-2 v-1 M13.5,14.5 h2 v1 h-2 v-1"
        :fill="`${TANK.colors[props.color].c}`"
      />
    </g>

    <g v-if="props.shape === 8">
      <path
        d="M1,1 h1 v1 h-1 v-1 M1,3 h1 v1 h-1 v-1 M1,5 h1 v1 h-1 v-1 M1,7 h1 v1 h-1 v-1 M1,9 h1 v1 h-1 v-1 M1,11 h1 v1 h-1 v-1 M1,13 h1 v1 h-1 v-1 M1,15 h1 v1 h-1 v-1 M5,4 h1 v2 h1 v1 h1 v1 h-2 v5 h-1 v-9 M7,1 h2 v7 h-1 v-5 h-1 v-2 M10,5 h1 v3 h-2 v-1 h1 v-2 M9,9 h1 v2 h-2 v-1 h1 v-1 M12,1 h1 v1 h-1 v-1"
        :fill="`${TANK.colors[props.color].a}`"
      />
      <path
        d="M2,1 h1 v1 h-1 v-1 M2,3 h1 v1 h-1 v-1 M2,5 h1 v1 h-1 v-1 M2,7 h1 v1 h-1 v-1 M2,9 h1 v1 h-1 v-1 M2,11 h1 v1 h-1 v-1 M2,13 h1 v1 h-1 v-1 M2,15 h1 v1 h-1 v-1 M3,1 h1 v15 h-1 v-15 M4,2 h2 v1 h2 v4 h-1 v-1 h-1 v-2 h-1 v9 h1 v1 h-2 v-12 M6,8 h2 v1 h-1 v2 h1 v2 h-2 v-5 M9,8 h2 v5 h-3 v-2 h2 v-2 h-1 v-1 M8,15 h1 v1 h-1 v-1 M9,1 h1 v2 h-1 v-2 M11,2 h2 v2 h-1 v2 h-1 v-1 h-1 v-2 h1 v-1 M11,13 h1 v1 h-1 v-1 M12,14 h1 v1 h-1 v-1 M13,1 h2 v1 h-2 v-1 M13,3 h2 v1 h-2 v-1 M13,5 h2 v1 h-2 v-1 M13,7 h2 v1 h-2 v-1 M13,9 h2 v1 h-2 v-1 M13,11 h2 v1 h-2 v-1 M13,13 h2 v1 h-2 v-1 M13,15 h2 v1 h-2 v-1"
        :fill="`${TANK.colors[props.color].b}`"
      />
      <path
        d="M1,2 h2 v1 h-2 v-1 M1,4 h2 v1 h-2 v-1 M1,6 h2 v1 h-2 v-1 M1,8 h2 v1 h-2 v-1 M1,10 h2 v1 h-2 v-1 M1,12 h2 v1 h-2 v-1 M1,14 h2 v1 h-2 v-1 M9,3 h1 v4 h-1 v-4 M8,8 h1 v2 h-1 v1 h-1 v-2 h1 v-1 M6,13 h5 v1 h1 v1 h-8 v-1 h2 v-1 M11,6 h1 v-2 h1 v10 h-1 v-1 h-1 v-7 M12,15 h1 v1 h-1 v-1 M13,2 h2 v1 h-2 v-1 M13,4 h2 v1 h-2 v-1 M13,6 h2 v1 h-2 v-1 M13,8 h2 v1 h-2 v-1 M13,10 h2 v1 h-2 v-1 M13,12 h2 v1 h-2 v-1 M13,14 h2 v1 h-2 v-1"
        :fill="`${TANK.colors[props.color].c}`"
      />
    </g>
  </g>
</template>

<script setup>
  import { TANK } from '@/utils/global'

  const degs = {
    up: 0,
    down: 180,
    left: 270,
    right: 90
  }

  const props = defineProps({
    direction: {
      default: 'up',
      validator(value, props) {
        return ['up', 'down', 'left', 'right'].includes(value)
      }
    },
    shape: {
      type: Number,
      required: true,
      validator(value, props) {
        return [1, 2, 3, 4, 5, 6, 7, 8].includes(value)
      }
    },
    color: {
      required: true,
      validator(value, props) {
        return Object.keys(TANK.colors).includes(value)
      }
    },
    x: {
      type: Number,
      default: 0
    },
    y: {
      type: Number,
      default: 0
    }
  })

</script>

<style lang="scss" scoped>
  
</style>